<template>
  <div class="edit-dialog">
    <el-dialog v-model="dialog"
               :title="titleName"
               :visible.sync="dialog"
               :close-on-click-modal="false"
               :show-close="true"
               width="400px"
               center
               @close="handleClose">
      <el-form ref="formRef"
               :model="addFormData"
               :rules="rules"
               label-position="right"
               label-width="auto">
        <el-form-item label="管理员"
                      prop="ownerNames">
          <el-select filterable
                     v-model="addFormData.ownerNames"
                     multiple
                     placeholder="请选择"
                     style="width: 100%"
                     size="medium"
                     v-if="1 == 1">
            <el-option v-for="item in options"
                       :key="item.name"
                       :label="item.name"
                       :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="普通用户"
                      v-if="admin">
          <el-select filterable
                     v-model="addFormData.customerNames"
                     multiple
                     placeholder="请选择"
                     style="width: 100%"
                     size="medium">
            <el-option v-for="item in options"
                       :key="item.name"
                       :label="item.name"
                       :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="普通用户" v-else>
          <el-input v-model="addFormData.customerNamesStr"
                    type="textarea"
                    :rows="2"
                    @input="inputChange"
                    placeholder="请输入用户名，多个英文逗号分隔"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary"
                     :loading="submitLoading"
                     icon="el-icon-check"
                     @click="submit('formRef')">提 交</el-button>
          <el-button icon="el-icon-close"
                     @click="handleClose">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { updateUser } from '@/api/platformManage'
import { list_tenant_admin } from '@/api/user'

export default {
  name: 'updateUser',
  props: {
    showDialog: Boolean,
    editType: Number,
    ownerNames: {
      type: Array,
      default: function () {
        return []
      }
    },
    customerNames: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data() {
    return {
      admin: false,
      addFormData: {
        targetId: "",
        ownerNames: [],
        customerNames: [],
        customerNamesStr:""
      },
      titleName: '分配用户',
      submitLoading: false,
      options: [],
      rules: {
        //ownerNames: [{ required: true, message: "请选择管理员", trigger: "blur" }]
      }
    }
  },
  computed: {
    dialog:{
      get () {
            return this.showDialog
          },
      set(v){

      }
    }
  },
  watch: {
    dialog(newVal, oldVal) {
      if (newVal) {
        this.addFormData.customerNamesStr = "";
        this.addFormData.targetId = this.$route.query.platformId;
        this.addFormData.ownerNames = this.ownerNames;
        this.addFormData.customerNames = this.customerNames;
        if (!this.admin) {
          //console.log(this.customerNames);
          if(this.customerNames&&this.customerNames.length>0){
            this.addFormData.customerNamesStr = this.customerNames.toString();
          }else{
            this.addFormData.customerNamesStr = "";
          }
        }
      }
    }
  },
  mounted() {
    list_tenant_admin().then(res => {
      this.options = res.value;
    });
    if (this.$store.state.user.userInfo.role == "ADMIN") {
      this.admin = true;
    } else {
      this.admin = false;
    }
  },
  methods: {
    // 取消事件
    handleClose() {
      this.$emit('changeVisible', false)
    },
    inputChange(val) {
      this.addFormData.customerNamesStr = val;

    },
    submit(formName) {

      this.submitLoading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          const that = this;
          let { targetId, ownerNames, customerNames } = { ...that.addFormData };
          if (!this.admin) {
            customerNames = this.addFormData.customerNamesStr.split(",");
          }
          const data = {
            targetId, ownerNames, customerNames
          }
          updateUser(data)
            .then(res => {
              that.submitLoading = false;
              if (res['code'] == 200) {
                that.$emit("changeVisible", false);
                that.$emit("getList");
                that.$message.success('更新成功!')
              } else {
                that.$message(res['msg'])
              }
            })
            .catch(() => {
              that.submitLoading = false
            })
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
</style>
